<!--vue模板-->
<template>
  <!--按钮-->
  <div class="nav">
    <el-button type="primary" @click="saveOrUpdate()">添加菜单</el-button>
    <el-button type="primary" @click="refreshData()">刷新</el-button>
  </div>
  <!--树和工作区-->
  <el-row class="hgt">
    <!--部门树-->
    <el-col :span="5" class="hgt">
      <el-tree
        :data="treeData"
        :props="defaultProps"
        :default-expand-all="true"
        @node-click="handleNodeClick"
      />
    </el-col>
    <el-col :span="1">&nbsp;</el-col>
    <el-col :span="18">
      <el-table :data="tableData" style="width: 100%" border stripe>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="name"
          label="名称"
          width="180"
          header-align="center"
        />
        <el-table-column label="类型" header-align="center">
          <template v-slot="{ row }">
            <el-tag type="success" v-if="row.type == 1">模块</el-tag>
            <el-tag type="info" v-else-if="row.type == 2">页面</el-tag>
            <el-tag v-else>按钮</el-tag>
          </template>
        </el-table-column>

        <el-table-column prop="path" label="路径" />
        <el-table-column prop="component" label="组件" />
        <el-table-column prop="sorts" label="排序" />
        <el-table-column prop="auths" label="授权" />
        <el-table-column
          label="操作"
          header-align="center"
          align="center"
          width="180"
        >
          <template v-slot="{ row }">
            <el-button type="primary" @click="saveOrUpdate(row)"
              >修改</el-button
            >
            <el-button type="danger" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  <!--保存或修改对话框-->
  <save-or-update
    v-model:visible="isShowDialog"
    ref="saveupdate"
    @refreshData="refreshData"
  ></save-or-update>
</template>

<!--vue 组件选项定义-->
<script>
import SaveOrUpdate from "./SaveOrUpdate.vue";
export default {
  data() {
    return {
      defaultProps: {
        children: "childs",
        label: "name",
      },
      tableData: [],
      treeData: [], //树形数据
      isShowDialog: false,
    };
  },
  components: {
    SaveOrUpdate,
  },
  created() {
    this.refreshData();
  },
  methods: {
    //刷新数据
    refreshData() {
      this.queryTree();
      this.queryChild("");
    },

    //查询树
    queryTree() {
      this.$http.get("/api/menu/tree", {}).then((res) => {
        if (res.code == 200) {
          this.treeData = res.result;
        }
      });
    },

    //删除方法
    del(id) {
      this.$confirm("你确定要删除吗?", "提示")
        .then((res) => {
          this.todel(id);
        })
        .catch((err) => {});
    },
    todel(id){
        this.$http.delete("/api/menu/delete",{id})
        .then(res=>{
            if(res.code==200){
              this.$message.success("删除成功");
              //重新加载数据 
              this.refreshData();
            }
        })
    },

    //点击树时
    handleNodeClick(node) {
      this.queryChild(node.id);
    },

    //根据部门编码查询所有子部门
    queryChild(pid) {
      this.$http.get("/api/menu/child", { pid }).then((res) => {
        if (res.code == 200) {
          this.tableData = res.result;
        }
      });
    },

    //添加或修改部门
    saveOrUpdate(data) {
      this.isShowDialog = true;
      this.$refs.saveupdate.init(data);
    },
  },
};
</script>

<!--vue样式 scoped当前样式只适用于当前组件-->
<style scoped>
:deep(.el-tree) {
  border-style: none;
  border-right: #ccc solid 1px;
}

.hgt {
  height: 98%;
}

.nav {
  height: 40px;
  line-height: 40px;
  margin-bottom: 10px;
}
</style>
